
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  View,
  TouchableOpacity,
  Alert,
  Image,
  Text
} from 'react-native';
const Dimensions = require('Dimensions')
const { width } = Dimensions.get('window');
let left = (width - (width*0.1)*4) / 5;

export default class BottomMenu extends Component<{}> {
  constructor(props) {
    super(props);
    this.jump = this.jump.bind(this);
  }
  jump(e){
    console.log(e)
  }
  render() {
    const {navigate} = this.props.navigation;
    return(
      <View style={styles.bottomContainerStyle}>
        <TouchableOpacity style={styles.bottomIconStyle}
        onPress={()=>{
          navigate('Home',{})
        }}
        >
          <Image source={require('../../../Assets/images/home.png')} style={styles.iconStyle}/>
          <Text>树谱</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.bottomIconStyle}>
          <Image source={require('../../../Assets/images/gj.png')} style={styles.iconStyle}/>
          <Text>轨迹</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.bottomIconStyle}>
          <Image source={require('../../../Assets/images/fx.png')}   style={styles.iconStyle}/>
          <Text>发现</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.bottomIconStyle} onPress={
          ()=>{
            navigate('Me',{});
          }
        }>
          <Image source={require('../../../Assets/images/me.png')} style={styles.iconStyle}/>
          <Text>我</Text>
        </TouchableOpacity>

      </View>
    )
  }
}

const styles = StyleSheet.create({
  bottomIconStyle:{
    width:width*0.10,
    height:'100%',
    marginLeft: left,
    justifyContent:'center',
    alignItems:'center',
  },
  bottomContainerStyle:{
    // flex:0.1,
    height:70,
    flexDirection:'row',
    borderTopColor:'black',
    borderTopWidth:1,
    width:'100%',
    backgroundColor:'white',
  },
  iconStyle:{
    width:width*0.1,
    height:32,
    marginBottom:2,
  }
});